<template>
  <el-card class="resetPassword">
    <div class="header">
      <span>重置密码</span>
    </div>
    <hr />
    <div class="body">
      请输入原密码
      <el-input v-model="resetPasswordMoudel.old_pwd" show-password class="input" style="margin-left: 30px;"></el-input>
      <br />请输入新密码
      <el-input v-model="resetPasswordMoudel.new_pwd" show-password class="input" style="margin-left: 30px;"></el-input>
      <br />请输入确认新密码
      <el-input v-model="resetPasswordMoudel.re_pwd" show-password class="input"></el-input>
    </div>
    <el-button type="primary" style="height: 40px;margin-left:165px;margin-top:15px;" @click="resetPassword">提交修改</el-button>
  </el-card>
</template>
  
  <script setup>
import { ref } from "vue";
const resetPasswordMoudel = ref({
  old_pwd: "",
  new_pwd: "",
  re_pwd: ""
});
import { userUpdatePasswordService } from "@/api/user.js";
import { ElMessage } from "element-plus";
import { useTokenStore } from "@/stores/token.js";
import { useRouter } from "vue-router";
const tokenStore = useTokenStore();
const router = useRouter();
const resetPassword = async () => {
    let result = await userUpdatePasswordService(resetPasswordMoudel.value)
    ElMessage.success(result.message ? result.message : '修改成功')
    // 删除token
    tokenStore.removeToken();
    // 跳转到登录页面
    router.push('/login')
}
</script>
  
  <style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.header:before,
.header:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.resetPassword {
  width: 100%;
}

.input {
  width: 480px;
  padding: 10px;
  height: 60px;
}

/* 设置提示文本颜色为灰色 */
.body {
  color: gray;
  font-size: 15px;
  margin-left: 30px;
}

/* 设置输入框内文本颜色为灰色 */
.el-input input {
  color: gray;
}
</style>